[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import DraggableButton from "./components/DraggableButton" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/DraggableButton.tsx" "use client" import { useState, useRef, useEffect } from "react" import { motion, useMotionValue, useTransform, useSpring, useAnimation } from "framer-motion" const DraggableButton = () => { const [quadrant, setQuadrant] = useState(1) const constraintsRef = useRef(null) const audioRef = useRef(null) const x = useMotionValue(0) const y = useMotionValue(0) const rotateX = useTransform(y, [-200, 200], [15, -15]) const rotateY = useTransform(x, [-200, 200], [-15, 15]) const springConfig = { damping: 10, stiffness: 100 } const scaleSpring = useSpring(1, springConfig) const controls = useAnimation() useEffect(() => { audioRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() }, []) const playSound = (frequency: number, duration: number) => { if (audioRef.current) { const oscillator = audioRef.current.createOscillator() const gainNode = audioRef.current.createGain() oscillator.connect(gainNode) gainNode.connect(audioRef.current.destination) oscillator.frequency.value = frequency oscillator.type = "sine" gainNode.gain.setValueAtTime(0.7, audioRef.current.currentTime) gainNode.gain.exponentialRampToValueAtTime(0.00001, audioRef.current.currentTime + duration) oscillator.start() oscillator.stop(audioRef.current.currentTime + duration) } } const handleDragStart = () => { playSound(330, 0.1) // Play a higher pitch sound when starting to drag scaleSpring.set(1.1) } const handleDragEnd = (event: any, info: any) => { playSound(220, 0.2) // Play a lower pitch sound when dropping scaleSpring.set(1) const newQuadrant = getQuadrant(x.get(), y.get()) setQuadrant(newQuadrant) // Wobble effect controls.start({ rotate: [0, -5, 5, -5, 5, 0], transition: { duration: 0.5 }, }) // Tilt based on velocity const tiltX = -info.velocity.y * 0.2 const tiltY = info.velocity.x * 0.2 controls.start({ rotateX: tiltX, rotateY: tiltY, transition: { duration: 0.5 } }) } const getQuadrant = (x: number, y: number) => { if (x >= 0 && y >= 0) return 1 if (x < 0 && y >= 0) return 2 if (x < 0 && y < 0) return 3 return 4 } const getBackgroundColor = () => { switch (quadrant) { case 1: return "bg-red-500" case 2: return "bg-blue-500" case 3: return "bg-green-500" case 4: return "bg-yellow-500" default: return "bg-gray-500" } } return (

{/* X and Y axes */}

Just Ship It

) } export default DraggableButton [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { colors: { red: { 500: "#EF4444", }, blue: { 500: "#3B82F6", }, green: { 500: "#10B981", }, yellow: { 500: "#F59E0B", }, gray: { 100: "#F3F4F6", 300: "#D1D5DB", 500: "#6B7280", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], }

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This